<template>
    <a-modal v-model:visible="imageShow" title="形象照上传" :width="850" @ok="imgOk" :destroyOnClose="true" :z-index="20" @cancel="outImg">
        <div style="margin-bottom:20px;font-size:16px">
            <span style="color:#333;margin-right:10px">当前形象照状态：</span>
            <template v-if="imgTech?.image">
                <span :style="{ color: share.getExamineState(imgTech.examine)[1] }">{{
                    share.getExamineState(imgTech.examine)[0] }}</span>
            </template>
            <span v-else style="color:gray">未上传图片</span>
        </div>
        <a-upload :fileList="imgData" :maxCount="1" list-type="picture-card" :beforeUpload="imgBefore">
            <div>
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
            </div>
        </a-upload>
    </a-modal>
</template>

<!-- 技师形象照模块 -->
<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { techStatAPI, imageAPI } from '../../../../api/management';
import { useUserData } from '../../../../stores/userData';
import { message } from 'ant-design-vue';
import share from '../../../../util/commnet'

const store = useUserData();    //pinia
const imgData = ref([]);
const imgUp = ref('');
const imageShow = ref(false);
const imgTech = ref({});

const emit = defineEmits(['setShow'])       //关闭组件的方法
const pros = defineProps({
    uid: {                       //拿到uid
        type: String,
        default: ''
    },
    shows: {                     //是否关闭组件
        type: Boolean,
        default: false
    }
})

watch(                              //监听是否关闭形象照上传模块
    () => pros.shows,
    async (n, o) => {
        if (n && pros.uid) {                      //当需要显示模块且存在uid时 拉取数据
            imgData.value = [];
            imgUp.value = '';
            let res = await techStatAPI(`imageSel|${pros.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            imgTech.value = res.data[0];
            console.log(res);
            imageShow.value = true;
            if (res.data.length == 1) {
                imgData.value = [{ url: `${share.http}/${res.data[0].dir}/${res.data[0].image}` }];
            }
        }
        imageShow.value = n;
    }
)
const imgBefore = f => {               //上传图片前
    imgUp.value = f;
    imgData.value = [{ url: URL.createObjectURL(f) }]
    return false;
}


const imgOk = async () => {
    if (imgUp.value) {       //上传了图片
        let image = await imageAPI(`imageUp|${imgTech.value?.image ? imgTech.value.image : ''}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, imgUp.value);
        if (image.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (image.code != 200) {
            message.error(image.message);
            return
        }

        let res = await techStatAPI(`imageUp|${image.file}|${pros.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        console.log(res);
        if (!res || res.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (res.code != 200) {
            message.error(res.message);
            return
        }
        message.success("添加成功")
        emit('setShow',false)

    }
}

const outImg =()=>{
    emit('setShow',false);
}
</script>